<template>
    <div class='detail_bottom'>
        <div class='detail_one'>
            <i class='icon iconfont icon-shop'></i>
            <p>店铺</p>
        </div>
        <div class='detail_one'>
            <i class='icon iconfont icon-message'></i>
            <p>客服</p>
        </div>
        <div class='detail_one'>
            <i class='icon iconfont icon-like'></i>
            <p>收藏</p>
        </div>
        <div class='detail_cart' @click.capture='showCartData()'>
            <span >加入购物车</span>
        </div>
        <div class='detail_buy'>
            <span>立即购买</span>
        </div>
    </div>
</template>
<script>
// import {mapState,mapActions} from 'vuex'
export default {
    data(){
        return{
            items:JSON.parse(localStorage.getItem('items'))
        }

    },
    watch:{
        items:function(){
             this.showCartData();
        }
    },
    computed:{
        // ...mapState(['products'])
    },
    methods:{
        
        showCartData(){
            // this.$showTip('添加成功！');
            this.$store.commit("setCartComments",this.items);
            // console.log(this.items);
            // this.$showTip();
        }
    },
    mounted() {
    //   this.showCartData();
    }
}
</script>
<style lang="less" scoped>
    .detail_bottom{
        position: fixed;
        // margin-top:100px;
        width: 100vw;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        bottom:0px;
        z-index: 99;
        background-color: #ffffff;
        border-top: 1px solid #dedede;
        text-align: center;
        color:#000;

       .detail_one{
           width:100px;
           height:100%;
           .iconfont{
               font-size: 40px;
           }

        //    border:1px solid red;
       }
       .detail_cart{
           width:250px;
           height:100%;
           background-color: #fee6e8;
           color:#f45c7d;
           
           display: flex;
           align-items: center;
           justify-content: center;
       }
       .detail_buy{
           flex-grow: 1;
           height:100%;
           background-color:#f45c7d;
           color:white; 
          
           display: flex;
           align-items: center;
           justify-content: center;
       }
        
    }

</style>